<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Js实现图片自动滚动效果</title>
<style type="text/css">
#container {
  background: #FFF;
  overflow:hidden;
  border: 1px dashed #CCC;
  width: 500px;
}
#inner {
  float: left;
  width: 800%;
}
#pics {
  float: left;
}
#goal {
  float: left;
  padding-left:5px;
}
</style>

</head>
<body>
<div id="container">
  <div id="inner">
    <div id="pics">
      <a href="#"><img src="http://img.taopic.com/uploads/allimg/140513/235059-14051310145412.jpg" width="100" height="100" border="0" /></a>
      <a href="#"><img src="http://img.taopic.com/uploads/allimg/140513/235059-14051310145412.jpg" width="100" height="100" border="0" /></a>
      <a href="#"><img src="http://img.taopic.com/uploads/allimg/140513/235059-14051310145412.jpg" width="100" height="100" border="0" /></a>
      <a href="#"><img src="http://img.taopic.com/uploads/allimg/140513/235059-14051310145412.jpg" width="100" height="100" border="0" /></a>
      <a href="#"><img src="http://img.taopic.com/uploads/allimg/140513/235059-14051310145412.jpg" width="100" height="100" border="0" /></a>
      <a href="#"><img src="http://img.taopic.com/uploads/allimg/140513/235059-14051310145412.jpg" width="100" height="100" border="0" /></a>
    </div>
    <div id="goal"></div>
  </div>
</div>
</body>
<script type="text/javascript">
(function(){
    var speed=10; 
    var tab=document.getElementById("container");
    var tab1=document.getElementById("pics");
    var tab2=document.getElementById("goal");
    tab2.innerHTML=tab1.innerHTML;
    function move(){
      if(tab2.offsetWidth-tab.scrollLeft<=0){
        tab.scrollLeft-=tab1.offsetWidth
      }else{
        tab.scrollLeft++;
      }
    }
    var timer=setInterval(move,speed);
    tab.onmouseover=function() {clearInterval(timer)};
    tab.onmouseout=function() {timer=setInterval(move,speed)};

})();
</script>
</html>
